<template>
	<view class="container">
		<view class="list">
			<view class="listin" v-for="(item,index) in list" :key="index" :style="active==index?'border:#1890FF 2px solid':''" @click="choose(index)">
				<view class="title">
					<text>{{item.waybill_sn}}</text>
					<text style="color: #1890FF;font-weight: 400;" @click="godetail(item.tms_waybill_id,item.all_freight_amount,item.all_delivery_amount,item.all_advance_amount,item.all_amount,item.waybill_sn)">查看详情</text>
				</view>
				<view class="body">
					<text>是否垫付：{{item.is_advance==0?'未垫资':'已垫资'}}</text>
					<text>运费：{{item.all_freight_amount?item.all_freight_amount:'暂无数据'}}</text>
					<text>是否配送：{{item.is_delivery==0?'不需要':'需要'}}</text>
					<text>配送费：{{item.all_delivery_amount}}</text>
					<text>垫资金额：{{item.all_advance_amount}}</text>
					<text>合计：{{item.all_amount}}</text>
				</view>
			</view>
		</view>
		<view class="none" v-if="list==''">
			<image src="../../static/img/none.png" mode=""></image>
			<text>暂无车费信息</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:null,
				chooseindex:null,
				listStyle:{
					border:"#1890FF 2px solid"
				},
				list:[],
				listdata:{
					all_freight_amount:'',
					all_delivery_amount:'',
					all_advance_amount:'',
					all_amount:'',
					wid:'',
					waybill_sn:''
					
				}
			};
		},
		onShow() {
		this.getlist()	
		},
		methods:{
			//运单列表
			getlist(){
				this.$yunlist().then(res=>{
					this.list=res.data.data
				})
			},
			//查看详情
			godetail(wid,all_freight_amount,all_delivery_amount,all_advance_amount,all_amount,waybill_sn){
				this.listdata={
					all_freight_amount:all_freight_amount,
					all_delivery_amount:all_delivery_amount,
					all_advance_amount:all_advance_amount,
					all_amount:all_amount,
					wid:wid,
					waybill_sn:waybill_sn
					
				}
			uni.navigateTo({
				url:"/pages/cardetail/cardetail?listdata="+JSON.stringify(this.listdata)
			})	
			},
			//选择配送单
			choose(index){
			// this.chooseindex=index
			// this.active=index
			
			
			// if(this.chooseindex==null){
			// 	this.chooseindex=index
				
			// }else{
			// 	this.chooseindex=null
				
			// }
			
				this.active=index
				
			
			console.log(this.chooseindex)
			},
		}
	}
</script>

<style lang="scss">
page{
	background: #fff;
}
.container{
	.list{
		padding: 20rpx;
		.listin{
			padding: 30rpx;
			background-color: #fff;
			box-shadow: 0px 0px 4px 0px rgba(204,204,204,0.5);
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			.body{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				text{
					font-size: 32rp;
					width: 40%;
					margin-top: 20rpx;
				}
			}
			.title{
				display: flex;
				padding: 0 0 30rpx 0;
				border-bottom: #ccc 1px dashed;
				justify-content: space-between;
				text{
					font-size: 36rpx;
					color: #000;
					font-weight: 600;
				}
			}
		}
	}
	.none{
		display: flex;
		flex-direction: column;
		align-items: center;
		image{
			width: 360rpx;
			height: 300rpx;
			margin-bottom: 20rpx;
		}
		text{
			font-size: 32rpx;
			color: #999;
		}
		
	}
}
</style>
